<template>
  <!--产能对比分析  -->
  <div class="capacity">
    <!-- 搜索框 -->
    <div class="capation_serch">
      <el-form class="table_serch" :rules="rules">
        <div class="table_serch_labe" style="margin-left: 10px">
          <div class="table_serch_labe_title">机种</div>
          <Ariplandown
            :modlulist="modlulist"
            :formInline="formInline"
          ></Ariplandown>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">线体</div>
          <Linedrpdown
            @change="onchange"
            :linedroplist="linedroplist"
            :formInline="formInline"
          ></Linedrpdown>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">起始日期1</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
               :picker-options="pickerOptions1"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-right: 0px">
          <div class="table_serch_labe_title">结束日期1</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions1"
              style="width: 135px; margin-left: 3px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0%">
          <div class="table_serch_labe_title">起始日期2</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime1"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
               :picker-options="pickerOptions1"
              style="width: 140px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0%">
          <div class="table_serch_labe_title">结束日期2</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime1"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
               :picker-options="pickerOptions1"
              style="width: 135px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 10px">
          <div class="table_serch_labe_title">设备</div>
          <el-select
            v-model="formInline.site"
            clearable
            size="mini"
            style="margin-left: 5px; margin-top: 8px; width: 140px"
            placeholder="请选择内容"
          >
            <el-option
              v-for="(item, index) in this.siteItems"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <div class="table_serch_labe" style="margin-right: 65%">
          <div class="table_serch_labe_title">班次</div>
          <el-form-item label="">
            <el-select
              v-model="formInline.class"
              clearable
              size="mini"
              style="margin-left: 5px; margin-top: 0px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option label="白班" value="白班"></el-option>
              <el-option label="夜班" value="夜班"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0%">
          <el-button
            type="primary"
            size="mini"
            style="height: 30px; margin-top: 5px"
            @click="Capacity"
            >查询</el-button
          >
        </div>
      </el-form>
    </div>
    <div class="hader_content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <div class="captin_select_cont">
          <!-- 下拉框 -->
          <div class="captin_select">
            <span style="font-size: 10px">缺陷选项</span>
            <el-select
              v-model="val"
              size="mini"
              @change="onchangclick"
              style="width: 120px; height: 40px; margin-left: 8px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <el-tab-pane label="缺陷对比分析" name="first">
          <!-- 折线图  1-->
          <div id="capaction_one"></div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>
import Linedrpdown from "../../../components/Linedropdown/Linedropdown";
import Ariplandown from "../../../components/Airplandown/Airplandown";
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { Popup, Ariplandown, Linedrpdown },
  data() {
    return {
        pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      Popup_show: false,
      val: "",
      val2: "",
      timer: 0,
      isshow: false,
      valtimer: "",
      activeName: "first",
      formInline: {
        recipe: "", 
        order: "",
        line: "",
        site: "",
        starttime: "",
        endtime: "",
        starttime1: "",
        endtime1: "",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      options: [],
      restaurants: [],
      continue1: [],
      continue2: [],
      density1: [],
      density2: [],
      rules: {},
      itemsdata1: [],
      itemsdata2: [],
      itemsoption: [],
      modlulist: [],
      linedroplist: [],
      sitedrwn: [],
      siteItems: [],
      total: 0,
    };
  },

  mounted() {
    this.getModelnolist();
    // this.restaurants = this.loadAll(); BrightDot  Line   Mura  total
  },
  methods: {
    onchange() {
      this.siteItems = [];
      this.sitedrwn.forEach((ele) => {
        if (ele.ID.includes(this.formInline.line)) {
          this.siteItems.push(ele.ID);
        }
      });
    },

    //下拉框折线图事件
    onchangclick() {
      if (this.continue1) {
        for (let i = 0; i < this.continue1.length; i++) {
          if (this.continue1[i].type == this.val) {
            this.itemsdata1 = this.continue1[i];
          }
        }

        for (let i = 0; i < this.continue2.length; i++) {
          if (this.continue2[i].type == this.val) {
            this.itemsdata2 = this.continue2[i];
          }
        }
            this.capaction_one();
      }
    },

    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    getModelnolist() {
      this.ajax(`func/1023/selProductList`).then((res) => {
        if (res.status == 200) {
          this.modlulist = res.data.product;
          this.linedroplist = res.data.line;
          this.sitedrwn = res.data.eqp;
        }
      });
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    ///查询请求数据方法
    Capacity() {
      if (this.formInline.recipe == "") {
        this.$message({
          showClose: true,
          message: "机种不能为空",
          type: "warning",
        });
      } else if (this.formInline.starttime == "") {
        this.$message({
          showClose: true,
          message: "起始日期1不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime == "") {
        this.$message({
          showClose: true,
          message: "结束日期1不能为空",
          type: "warning",
        });
      } else if (this.formInline.starttime1 == "") {
        this.$message({
          showClose: true,
          message: "起始日期2不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime1 == "") {
        this.$message({
          showClose: true,
          message: "结束日期2不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
        this.$message({
          showClose: true,
          message: "结束日期不能小于起始日期",
          type: "warning",
        });
      } else if (this.formInline.endtime1 < this.formInline.starttime1) {
        this.$message({
          showClose: true,
          message: "结束日期2不能小于起始日期2",
          type: "warning",
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: `prod/1008?starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}&recipe=${this.formInline.recipe}&line=${this.formInline.line}&site=${this.formInline.site}&class=${this.formInline.class}&order=${this.formInline.order}&personid=${this.formInline.personid}&starttime1=${this.formInline.starttime1}&endtime1=${this.formInline.endtime1}&errorcode=${this.formInline.errorcode}`,
          method: "GET",
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          var rult = res;
          console.log(rult.data);
          if (rult) {
            this.continue1 = rult.data.first;
            this.continue2 = rult.data.Second;

            if (this.continue1.length) {
              // this.itemsdata1 = this.continue1[0];
              // this.itemsdata2 = this.continue2[0];
              // this.val = this.continue1[0].type;

              this.itemsdata1 = this.continue1;
              this.itemsdata2 = this.continue2;
              // this.val = this.continue1[0].type;
              this.capaction_one();
            } else {
              this.$message({
                showClose: true,
                message: "数据返回为空，请重新重新请求",
                type: "error",
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 300);
            }
            for (let i = 0; i < rult.data.first.length; i++) {
              if (this.options.length == rult.data.first.length) {
                return false;
              } else {
                this.options.push(rult.data.first[i].type);
              }
            }

            for (let i = 0; i < rult.data.Second.length; i++) {
              if (this.itemsoption.length == rult.data.Second.length) {
                return false;
              } else {
                this.itemsoption.push(rult.data.Second[i].type);
              }
            }
          }
        });
        // chart.dispose();
        // console.log('1111111111111111',chart)
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },
    cancelget() {
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    //  折线图 1
    capaction_one() {
      let capaction_one = this.$echarts.init(
        document.getElementById("capaction_one")
      );
      let result = [];
      let result2 = [];
      if (this.itemsdata1.constructor == Array) {
        for (
          var i = 0;
          i < this.itemsdata1.length && this.itemsdata2.length;
          i++
        ) {
          let obj = {
            num: this.itemsdata1[i].data.map((item) => {
              return item.val;
            }),
          };
          let obj2 = {
            num: this.itemsdata2[i].data.map((item) => {
              return item.val;
            }),
          };
          for (var key in obj) {
            obj[key].forEach((val, index) => {
              if (result[index] == null || result[index] == "") {
                result[index] = 0;
              }
              result[index] += val;
            });
          }

          for (var keyq in obj2) {
            obj2[keyq].forEach((val, index) => {
              if (result2[index] == null || result2[index] == "") {
                result2[index] = 0;
              }
              result2[index] += val;
            });
          }
        }
      } else {
        for (let i = 0; i < this.itemsdata1.data.length; i++) {
          result.push(this.itemsdata1.data[i].val);
        }

        for (let i = 0; i < this.itemsdata2.data.length; i++) {
          result2.push(this.itemsdata2.data[i].val);
        }
      }
      capaction_one.setOption({
        title: [
          {
            text: "缺陷分析",
            x: "center",
            y: "1",
            marginLeft: "5%",
            textStyle: {
              fontSize: 16,
              fontWeight: 100,
            },
          },
          {
            subtext: "纵轴单位(个数)",
            subtextStyle: {
              align: "left",
              lineHeight: 76,
              fontSize: 10,
              padding: 15,
            },
          },
        ],
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
            "14(日)",
            "15(日)",
          ],
          axisLabel: {
            fontSize: 10,
          },
        },
        legend: {
          // data: keyname,
          data: ["条件1", "条件2"],
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            // name: keyname,
            name: "条件1",
            data: result,
            type: "line",
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "red",
                },
              },
            },
          },
          {
            // name: keyname2,
            name: "条件2",
            data: result2,
            type: "line",
            label: {
              show: true,
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "blue",
                },
              },
            },
          },
        ],
      });
    },

   
    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style scoped>
.capacity {
  width: 100%;
  /* border: 1px solid #000; */
}
.capation_serch {
  width: 100%;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  /* border: 1px solid red; */
  background: #ffffff;
}
#capaction_one {
  width: 1300px;
  height: 52vh;
  margin: 10px auto;
  display: flex;
  margin-left: 0%;
  background: #ffffff;
}
#capaction_two {
  width: 1000px;
  height: 290px;
  margin-top: 10px;
  background: #ffffff;
}
.capaction_list {
  width: 100%;
  margin-top: 10px;
  background: #ffffff;
}

.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  /* background: #fff; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

.hader_content {
  width: 100%;
  /* border: 1px solid #000; */
  height: 50%;
  margin-top: 30px;
  background: #fff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 40%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}

.captin_select_cont {
  display: flex;
}

/* 笔记本全屏 */
/* @media screen and (min-width:1535px) {
   .and_table
   {
      margin-right:22.4%;
   }
} */
</style>